import { defineComponent, reactive, ref } from "vue";
import LPopup from "@/components/public/lPopup/lPopup";
import styles from "./ChannelAdd.module.less";
import _ from "lodash";
import { message } from "ant-design-vue";
import promotionChannelManageService from "@/modules/individualOrdersManagement/promotion/promotionChannelManage.service";
export default defineComponent({
  emits: ["editSuccess"],
  setup(props: any, { expose, emit }) {
    const $promotionChannelManageService = new promotionChannelManageService();
    const addPopupRef = ref(null as any);
    const form_ori = {
      id: "",
      name: "",
      username: "",
      phone: "",
    }
    const form = reactive(_.cloneDeep(form_ori) as any)
    const closed = () => {
      Object.entries(form_ori).forEach((item) => {
        form[item[0]] = item[1];
      })
    }
    // 打开弹窗
    const open = (record: any) => {
      if (record?.id) {
        form.id = record.id || "";
        form.name = record.name || "";
        form.username = record.username || "";
        form.phone = record.phone || "";
      }
      addPopupRef.value.open();
    }
    // 关闭弹窗
    const close = () => {
      addPopupRef.value.close();
    }
    // 确认添加
    const submit = () => {
      if (!form.name) {
        message.error(`请输入渠道名称`);
        return;
      }
      if (!form.username) {
        message.error(`请输入联系人姓名`);
        return;
      }
      if (!form.phone) {
        message.error(`请输入联系电话`);
        return;
      }
      if (form.id) {
        $promotionChannelManageService.edit({
          id: form.id,
          name: form.name,
          username: form.username,
          phone: form.phone,
        }).then(res => {
          message.success("编辑成功");
          close();
          emit("editSuccess");
        })
      } else {
        $promotionChannelManageService.add({
          name: form.name,
          username: form.username,
          phone: form.phone,
        }).then(res => {
          message.success("添加成功");
          close();
          emit("editSuccess");
        })
      }
    }
    expose({ open, close });
    // 输入行
    const SignRow = (signRowProps, { slots: signRowSlots }) => {
      return (
        <div class={styles['sign-row']}>
          <span class={styles.label}>{signRowProps.label}</span>
          <div class={styles.value}>
            {
              signRowSlots?.default?.()
            }
          </div>
        </div>
      )
    }
    return () => (
      <LPopup title={form.id ? "编辑渠道" : "添加渠道"} ref={addPopupRef} onClosed={() => { closed() }}>
        <div class={styles.container}>
          <div class={styles['sign-rows']}>
            <SignRow label="渠道名称">
              <a-input v-model:value={form.name} placeholder="请输入渠道名称..." />
            </SignRow>
            <SignRow label="联系人姓名">
              <a-input v-model:value={form.username} placeholder="请输入联系人姓名..." />
            </SignRow>
            <SignRow label="联系电话">
              <a-input v-model:value={form.phone} placeholder="请输入联系电话..." />
            </SignRow>
          </div>
          <div class={styles.footer}>
            <a-button onClick={() => { addPopupRef.value.close() }}>取消</a-button>
            <a-button type="primary" onClick={() => { submit() }}>确认</a-button>
            <span class={styles['origin-password']}>初始密码：123456</span>
          </div>
        </div>
      </LPopup>
    )
  }
})